<!DOCTYPE html>
<html>

<head>
    <title>名片</title>
    <meta name="keywords" content="{$site_info.site_seo_keywords|default=''}" />
    <meta name="description" content="{$site_info.site_seo_description|default=''}">
    <include file="public@head" />
    <link rel="stylesheet" type="text/css" href="/assets/dist/plugins/dropload/dropload.css?{:time()}">
</head>

<body class="page-index bg-light">
    <div class="main">
        <div class="tab">
            <a href="javascript:;" class="item cur">个人名片</a>
            <a href="javascript:;" class="item">校友名片</a>
        </div>
        <div class="content">
            <div class="lists"></div>
            <div class="lists"></div>
        </div>
    </div>
    <div class="post-article bg-primary rounded-circle">
        <a href="#" data-toggle="modal" data-target="#postArticleBox" class="text-white"><i class="fa fa-id-card-o"></i></a>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="postArticleBox" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">创建我的名片</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{:url('businesscard/Card/addCard')}" method="post" class="form-horizontal js-ajax-form margin-top-20">
                        <div class="row">
                            <div class="col-md-6">
                                <table class="table table-bordered">
                                    <tr>
                                        <th width="85">所属行业<span class="form-required">*</span></th>
                                        <td>
                                            <input class="form-control" type="text" required value="" placeholder="请选择分类" onclick="doSelectCategory();" id="js-categories-name-input" readonly/>
                                            <input class="form-control" type="hidden" value="" name="post[categories]" id="js-categories-id-input" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>姓名<span class="form-required">*</span></th>
                                        <td>
                                            <input class="form-control" type="text" name="post[name]" id="name" required value="" placeholder="请输入姓名" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>班级<span class="form-required">*</span></th>
                                        <td>
                                            <input class="form-control" type="text" name="post[class]" id="class" required value="" placeholder="请输入班级，如2005级化工3班" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>学号</th>
                                        <td>
                                            <input class="form-control" type="text" name="post[stu_no]" id="class" value="" placeholder="请输入学号" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>手机<span class="form-required">*</span></th>
                                        <td>
                                            <input class="form-control" type="text" name="post[mobile_phone]" id="mobile_phone" value="" placeholder="请输入手机号" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>邮箱</th>
                                        <td>
                                            <input class="form-control" type="text" name="post[email]" id="email" value="" placeholder="请输入邮箱" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>微信号</th>
                                        <td>
                                            <input class="form-control" type="text" name="post[wechat]" id="wechat" value="" placeholder="请输入微信号" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>个人简介</th>
                                        <td>
                                            <textarea class="form-control" name="post[summary]" style="height: 50px;" placeholder="请填一句个人简介"></textarea>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <table class="table table-bordered">
                                    <tr style="display: none;">
                                        <th width="85">所在区域</th>
                                        <td>
                                            <input class="form-control" type="hidden" name="post[address]" id="address" value="" />
                                            <div id="address-selector" data-toggle="distpicker" data-autoselect="3">
                                                <select class="form-control col-md-6"></select>
                                                <select class="form-control col-md-6"></select>
                                                <select class="form-control col-md-6"></select>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>工作单位<span class="form-required">*</span></th>
                                        <td>
                                            <input class="form-control" type="text" name="post[employer]" id="employer" required value="" placeholder="请输入工作单位" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>职位名称</th>
                                        <td>
                                            <input class="form-control" type="text" name="post[position]" id="position" value="" placeholder="请输入职位名称" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>工作电话</th>
                                        <td>
                                            <input class="form-control" type="text" name="post[work_tel]" id="work_tel" value="" placeholder="请输入工作电话" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>标签</th>
                                        <td>
                                            <input class="form-control" type="text" name="post[card_tags]" id="keywords" value="" placeholder="请输入标签">
                                            <p class="help-block" style="margin: 0">多个标签之间用英文逗号隔开</p>
                                        </td>
                                    </tr>
                                    <tr style="display: none;">
                                        <th>发布时间</th>
                                        <td>
                                            <input class="form-control js-bootstrap-datetime" type="text" name="post[published_time]" value="{:date('Y-m-d H:i:s',time())}">
                                        </td>
                                    </tr>
                                    <tr style="display: none;">
                                        <th>状态</th>
                                        <td>
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" name="post[post_status]" value="1" checked>发布</label>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-1 col-sm-10">
                                <button type="submit" class="btn btn-primary js-ajax-submit">{:lang('ADD')}</button>
                                <button class="btn btn-light float-right" data-dismiss="modal" class="mr-4">取消</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="postCategoryBox" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">选择分类</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <ul class="list-unstyled" id="categories">
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <include file="public@scripts" />
    <include file="public@footer" />
    <script>
    function doSelectCategory() {
        var selectedCategoriesId = $('#js-categories-id-input').val();
        openIframeLayer("{:url('businesscard/Card/select')}?ids=" + selectedCategoriesId, '请选择分类', {
            area: ['400px', '400px'],
            btn: ['确定', '取消'],
            yes: function(index, layero) {
                //do something

                var iframeWin = window[layero.find('iframe')[0]['name']];
                var selectedCategories = iframeWin.confirm();
                if (selectedCategories.selectedCategoriesId.length == 0) {
                    layer.msg('请选择分类');
                    return;
                }
                $('#js-categories-id-input').val(selectedCategories.selectedCategoriesId.join(','));
                $('#js-categories-name-input').val(selectedCategories.selectedCategoriesName.join(' '));
                //console.log(layer.getFrameIndex(index));
                layer.close(index); //如果设定了yes回调，需进行手工关闭
            }
        });
    }

    $(function() {
        //用户登录
        $.post("{:url('user/index/isLogin')}", {}, function(data) {
            console.log(data);
            if (data.code == 1) {
                if (data.data.user.avatar) {}
            }
        });

    });

    /**
     * [redirectCard description]
     * @param  {[type]} obj  [description]
     * @param  {[type]} type 1,为个人card；2,为企业card
     * @return {[type]}      [description]
     */
    function redirectCard(obj, type) {
        if (type == 1) {
            window.location.href = "https://mlkz.top/card/" + $(obj).data('id');
        } else if (type == 2) {
            window.location.href = "https://mlkz.top/company/" + $(obj).data('id');
        }
    }

    $(function() {
        var itemIndex = 0;
        var tab1LoadEnd = false;
        var tab2LoadEnd = false;
        // tab
        $('.tab .item').on('click', function() {
            var $this = $(this);
            itemIndex = $this.index();
            $this.addClass('cur').siblings('.item').removeClass('cur');
            $('.lists').eq(itemIndex).show().siblings('.lists').hide();

            // 如果选中菜单一
            if (itemIndex == '0') {
                // 如果数据没有加载完
                if (!tab1LoadEnd) {
                    // 解锁
                    dropload.unlock();
                    dropload.noData(false);
                } else {
                    // 锁定
                    dropload.lock('down');
                    dropload.noData();
                }
                // 如果选中菜单二
            } else if (itemIndex == '1') {
                if (!tab2LoadEnd) {
                    // 解锁
                    dropload.unlock();
                    dropload.noData(false);
                } else {
                    // 锁定
                    dropload.lock('down');
                    dropload.noData();
                }
            }

            // 重置
            dropload.resetload();
        });

        var pageStart = 0,
            pageEnd = 0,
            pageRecStart = 0,
            pageRecEnd = 0;

        // dropload
        var dropload = $('.content').dropload({
            scrollArea: window,
            loadDownFn: function(me) {
                // 加载菜单一的数据
                if (itemIndex == '0') {
                    pageStart++;
                    $.ajax({
                        type: 'GET',
                        url: 'https://mlkz.top/api/businesscard/cards?page=' + pageStart,
                        dataType: 'json',
                        success: function(data) {
                            var result = '';
                            pageEnd = data.data.last_page;
                            if (pageStart <= pageEnd) {
                                for (var i = 0; i < data.data.data.length; i++) {
                                    var art = data.data.data[i];
                                    console.log(art);
                                    result += '<div data-id="' + art.id + '" data-cid="' + art.category_ids[0] + '" class="card mb-3 border-0" onclick="redirectCard(this,1)">' +
                                        '<div class="card-header bg-white"><p class="mb-0 text-truncate"><span class="float-left mr-3 font-weight-bold">' + art['name'] + '</span><span class="text-muted">' + art.summary + '</span></p></div>' +
                                        '<div class="card-body"><p class="font-italic">' + art.employer + " | " + art.position + '</p>' +
                                        '<p class="card-text">' + art.card_excerpt + '</p></div>' +
                                        '<div class="card-footer bg-white text-muted">' + art.card_hits + '查看' + '</div>' +
                                        '</div>';

                                    if (pageStart == pageEnd) {
                                        // 数据加载完
                                        tab1LoadEnd = true;
                                        // 锁定
                                        me.lock();
                                        // 无数据
                                        me.noData();
                                    }
                                }
                                // 为了测试，延迟1秒加载
                                setTimeout(function() {
                                    $('.lists').eq(0).append(result);
                                    // 每次数据加载完，必须重置
                                    me.resetload();
                                }, 0);
                            }
                        },
                        error: function(xhr, type) {
                            alert('Ajax error!');
                            // 即使加载出错，也得重置
                            me.resetload();
                        }
                    });
                    // 加载菜单三的数据
                } else if (itemIndex == '1') {
                    pageRecStart++;
                    $.ajax({
                        type: 'GET',
                        url: 'https://mlkz.top/api/schain/enterprises?page=' + pageRecStart,
                        dataType: 'json',
                        success: function(data) {
                            var result = '';
                            pageRecEnd = data.data.last_page;

                            if (pageRecStart <= pageRecEnd) {
                                for (var i = 0; i < data.data.data.length; i++) {
                                    var art = data.data.data[i];
                                    console.log(art);

                                    result += '<div data-id="' + art.id + '" data-cid="' + art.category_ids[0] + '" class="card mb-3 border-0" onclick="redirectCard(this,2)">' +
                                        '<div class="card-header bg-white"><h6 class="my-1 mcard-title">' + art['ent_title'] + '</h6></div>' +
                                        '<div class="card-body"><p class="text-muted"><i class="fa fa-map-marker"></i> ' + art.ent_address + '</p>' +
                                        '<p class="card-text">' + art.ent_excerpt + '</p></div>' +
                                        '<div class="card-footer bg-white text-muted">' + art.ent_hits + '查看' + '</div>' +
                                        '</div>';

                                    if (pageRecStart == pageRecEnd) {
                                        // 数据加载完
                                        tab2LoadEnd = true;
                                        // 锁定
                                        me.lock();
                                        // 无数据
                                        me.noData();
                                    }
                                }
                                // 为了测试，延迟1秒加载
                                setTimeout(function() {
                                    $('.lists').eq(1).append(result);
                                    // 每次数据加载完，必须重置
                                    me.resetload();
                                }, 0);
                            }
                        },
                        error: function(xhr, type) {
                            alert('Ajax error!');
                            // 即使加载出错，也得重置
                            me.resetload();
                        }
                    });
                }
            }
        });
    });
    </script>
</body>

</html>